<section *ngIf="show">
  <div
    dAnchorBox
    dAnchorHashSupport
    [view]="{ top: 60, bottom: 0 }"
    class="mymain"
    style="position: relative;"
    [updateUrlWhenAnchorActive]="updateUrlWhenAnchorActive"
    [scrollToAnchorByHashOnlyInit]="scrollToAnchorByHashOnlyInit"
  >
    <div class="mysidebar">
      <d-sticky [view]="{ top: 60, bottom: 0 }">
        <ul class="step-nav">
          <li [dAnchorLink]="'base-info'" anchorActive="active">基本信息</li>
          <li [dAnchorLink]="'issue-list'" anchorActive="active">需求列表</li>
          <li [dAnchorLink]="'case-list'" anchorActive="active" id="case_list_anchor">用例列表</li>
          <li [dAnchorLink]="'quality-result'" anchorActive="active">
            质量评估
          </li>
        </ul>
      </d-sticky>
    </div>
    <div class="mycontent">
      <div [dAnchor]="'base-info'" class="section-block">
        <h3>基本信息</h3>
        这里显示基本信息。
      </div>
      <div [dAnchor]="'issue-list'" class="section-block">
        <h3>需求列表</h3>
        这里显示需求列表。
      </div>
      <div [dAnchor]="'case-list'" class="section-block">
        <h3>用例列表</h3>
        这里显示用例列表。
      </div>
      <div [dAnchor]="'quality-result'" class="section-block" id="quality_result">
        <h3>质量评估</h3>
        这里显示质量评估。
      </div>
    </div>
  </div>
  <p>组件仅实现了锚点的功能，可搭配sticky使用，跟随滚动效果请参考sticky</p>
</section>
<div>
  <div class="option"><d-toggle [(ngModel)]="updateUrlWhenAnchorActive"></d-toggle> 激活anchor的时候刷新地址哈希值</div>
  <div class="option">
    <d-button (btnClick)="click('#case_list_anchor')">点击“用例列表”锚点链接</d-button> 刷新地址哈希值{{
      updateUrlWhenAnchorActive ? '生效' : '不生效'
    }}
  </div>
  <div class="option">
    <d-button (btnClick)="click('#quality_result')">点击“质量评估”锚点内部</d-button> 刷新地址哈希值{{
      updateUrlWhenAnchorActive ? '生效' : '不生效'
    }}
  </div>
</div>
<div>
  <div class="option"><d-toggle [(ngModel)]="scrollToAnchorByHashOnlyInit"></d-toggle> 仅初始化的时候滚动到对应锚点</div>
  <div class="option"><d-button (btnClick)="reInit()">通过哈希跳到“需求列表”并重新初始化</d-button> 滚动到对应锚点{{ '生效' }}</div>
  <div class="option">
    <d-button (btnClick)="jumpTo()">通过哈希跳转到“需求列表”</d-button>滚动到对应锚点{{ scrollToAnchorByHashOnlyInit ? '不生效' : '生效' }}
  </div>
</div>
